<template>
    <div class="tools-btns">
        <el-button v-for="(item, index) in primaryButtonList" :key="index" type="primary" :icon="item.icon"
            @click="buttonEventHandler(item.funcName)">
            <span>{{ item.tittle }}</span>
        </el-button>
    </div>
    <el-collapse>
        <el-collapse-item>
            <template #title>
                <el-tag effect="light" size="large" round style="margin: 0 16px">
                    工具栏
                </el-tag>
            </template>
            <div>
                <el-tag effect="light" round style="margin: 0 16px">
                    工具栏具体设置
                </el-tag>
                <el-button type="primary" class="tools-btn" size="small" round>按钮1</el-button>
                <el-button type="primary" class="tools-btn" size="small" round>按钮2</el-button>
                <el-button type="primary" class="tools-btn" size="small" round>按钮3</el-button>
                <el-button type="primary" class="tools-btn" size="small" round>按钮4</el-button>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script setup name="ToolsBar">
import { EditPen, Pointer } from '@element-plus/icons-vue';
import { ref } from 'vue-demi';
import { allPrimaryList, nodeTypeList } from './config.js'
import { buttonFuncList } from './primaryTools.js'

const primaryButtonList = ref([])

const emits = defineEmits(['update:buttonEventHandler', 'customEvent'])

/**
    Initialize primary tools button of current node
*/
const initToolsBar = (type) => {
    primaryButtonList.value = []
    const list = nodeTypeList.get(type)
    list.forEach(item => {
        allPrimaryList.forEach(button => {
            if (item === button.id) {
                primaryButtonList.value.push(button)
            }
        })
    })
}

const buttonEventHandler = (funcName) => {
    const funcDispatch = buttonFuncList.get(funcName)
    emits('customEvent', funcDispatch)
}

defineExpose({
    initToolsBar
})

</script>


<style lang="scss">
.el-collapse-item__content {
    padding-bottom: 8px;
}
.el-tabs__header {
    margin: 0;
}
</style>

<style lang="scss" scoped>
.tools-btns {
    position: absolute;
    z-index: 2;
    left: 100px;
    top: 48px;
    .tools-btn {
        margin: 0 8px;
    }
}
</style>>